<!-- 蓝海世界 -->
<template>
	
	<fui-tabs :tabs="tabs" center></fui-tabs>
	<view style="padding: 30rpx;">
		<view  style="display: flex;flex-direction: row;flex-wrap: wrap;">
			<view  v-for="(item, index) in productList" :key="index" class="product" @click="onNav(`/view/blueOceanworld/applyDetail`)">
				<image :src="item.image" mode="widthFix" style="width: 100%;max-height:200rpx;"></image>
				<view style="padding: 10px;">
					<view class="title">
						{{item.title}}
					</view>
					<view class="content">
						{{item.content}}
					</view>
					<view style="font-size: 26rpx;margin-top: 10rpx;color: #ff3838;">
						<text>￥</text><text>{{item.money}}</text> 
					</view>
				</view>
				
			</view>
		</view>
	
	</view>
</template>

<script setup>
	import {ref, reactive} from "vue"
	const tabs = reactive([
		{
			name: '全部',
			id: 0
		},
		{
			name: 'App',
			id: 1
		},
		{
			name: '微信小程序',
			id: 2
		},
		{
			name: 'PC',
			id: 3
		},
		{
			name: 'H5',
			id: 4
		}
	])
	
	const productList = ref([
		 {
			'id': '0',
			'image': '../../static/images/tu1.jpg',
			'title': '漓江书院小程序',
			'content': '传统门店升级线上线下互通小程序，打通新华书店收银系统，增强用户粘性。 漓江出版社成立于1980年，隶属于广西出版传媒集团有限公司，是中国大陆出版文学艺术、人文社科、文化生活和青少年读物的重要机构。',
			'money': '999.99'
		},
		{
			'id': '1',
			'image': '../../static/images/tu2.jpg',
			'title': '广西高速公路培训视频课程小程序',
			'content': '用户可通过购买会员，填写信息后，可免费观看培训视频，免费参加后台预设的考试，系统根据答题情况自动评分。且可通过小程序进行高速公路的招聘报名等。',
			'money': '615.99'
		},
		{
			'id': '2',
			'image': '../../static/images/tu3.jpg',
			'title': '乐享生鲜APP',
			'content': '乐享生鲜是一款经典的购买生鲜产品的平台软件，软件在功能上面是非常的齐全的，用户可以使用这款应用在平台上面购买到新鲜的蔬菜，在这个平台上面的物品是非常的多的，用户需要购买什么样的产品，去搜索自己需要购买的物品就可以了，还有物品都是有分类的，你可以在分类里面进行买东西。',
			'money': '9264.99'
		},
		{
			'id': '4',
			'image': '../../static/images/tu1.jpg',
			'title': '漓江书院小程序',
			'content': '传统门店升级线上线下互通小程序，打通新华书店收银系统，增强用户粘性。 漓江出版社成立于1980年，隶属于广西出版传媒集团有限公司，是中国大陆出版文学艺术、人文社科、文化生活和青少年读物的重要机构。',
			'money': '999.99'
		},
	])
	
	const onNav = (url) => {
		uni.navigateTo({
			url
		})
	}
</script>

<style lang="scss">
	.product {
		border-radius: 10rpx;
		overflow: hidden;
		background-color: #fff;
		width: calc((100% - 20rpx) / 2);
		margin-right: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-top: 20rpx;
		
		&:nth-child(2n) {
			margin-right: 0;
		}
	}
	.title {
		font-size: 26rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.content {
		font-size: 24rpx;
		color: rgba(0,0,0,.45);
		margin-top: 15rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>